<template>
  <div class="checkboxSelect">
    <el-checkbox-button
      class="checkbox-all"
      v-model="checkAll"
      :indeterminate="isIndeterminate"
      @change="handleCheckAllChange"
    >
      全部
    </el-checkbox-button>

    <el-checkbox-group
      v-model="modelValue.value"
      @change="handleCheckedCitiesChange"
    >
      <div ref="box" id="checkboxBox">
        <el-checkbox-button
          :class="'chosecheckbox' + idself"
          v-for="(option, index) in itemObject.options.slice(0, showIndex)"
          :key="option.code"
          :label="option.value"
          :value="option.code"
        >
          {{ option.value }}
        </el-checkbox-button>
        <span v-show="showMore">
          <el-checkbox-button
            :class="'chosecheckbox' + idself"
            v-for="option in itemObject.options.slice(showIndex)"
            :key="option.code"
            :label="option.value"
            :value="option.code"
          >
            {{ option.value }}
          </el-checkbox-button>
        </span>
      </div>
    </el-checkbox-group>
    <template v-if="itemObject.options.length > 20">
      <span
        class="icon-down"
        title="展开"
        v-if="!showMore"
        @click="showOthers(true)"
        ><el-icon color="#2263BF"><DArrowLeft /></el-icon
      ></span>
      <span
        class="icon-up"
        title="收起"
        v-if="showMore"
        @click="showOthers(false)"
        ><el-icon color="#2263BF"><DArrowLeft /></el-icon
      ></span>
    </template>
  </div>
</template>

<script setup>
import { onMounted, nextTick, ref,onUpdated } from "vue";
import eventBus from "@/utils/mitt";
const props = defineProps({
  itemObject: {
    type: Object,
  },
});
const box = ref(null);
let widthValue = ref(0);
let idself = ref();
onMounted(() => {
  idself.value = crypto.randomUUID();
  // setTimeout(() => {
  //   nextTick(() => {
  //     const rect = box.value.offsetWidth;
  //     widthValue.value = rect;
  //     toSelectTag();
  //   });

  //   window.addEventListener("resize", () => {
  //     nextTick(() => {
  //       const rect = box.value.offsetWidth;
  //       widthValue.value = rect;
  //       toSelectTag();
  //     });
  //   });
  // }, 10000);
  // eventBus.on('changsewidth', ()=>{
  //    nextTick(() => {
  //     const rect = box.value.offsetWidth;
  //     widthValue.value = rect;
  //     toSelectTag();
  //   });

  //   window.addEventListener("resize", () => {
  //     nextTick(() => {
  //       const rect = box.value.offsetWidth;
  //       widthValue.value = rect;
  //       toSelectTag();
  //     });
  //   });
  // });
});

let showMore = ref(true);
let showIndex = ref(20);
const toSelectTag = () => {
  let allWidth = 0;
  let index = 0;
  let list = document.getElementsByClassName("chosecheckbox" + idself.value);
  for (let i = 0; i < list.length; i++) {
    allWidth += list[i].offsetWidth + 12;
    if (allWidth >= widthValue.value) {
      index = i;
      showMore.value = false;
      break;
    } else {
      index = list.length;
    }
  }
  showIndex.value = index;
};

const showOthers = (value) => {
  showMore.value = value;
};

let modelValue = ref({});
watch(
  () => props.itemObject,
  (newVal) => {
    modelValue.value = {
      fieldName: newVal.fieldName,
      inputType: newVal.inputType,
      matchOption: "",
      value: [],
    };
  },
  {
    immediate: true,
    deep: true,
  }
);

watch(
  modelValue,
  (newVal) => {
    emit("update:modelValue", newVal);
  },
  {
    deep: true,
   
  }
);

const emit = defineEmits(["update:modelValue"]);

let checkAll = ref(false);
let isIndeterminate = ref(true);
const handleCheckAllChange = (val) => {
  if (val) {
    modelValue.value.value = props.itemObject.options.map((item) => item.code);
  } else {
    modelValue.value.value = [];
  }
};
const handleCheckedCitiesChange = (value) => {
  const checkedCount = value.length;
  checkAll.value = checkedCount === props.itemObject.options.length;
  isIndeterminate.value =
    checkedCount > 0 && checkedCount < props.itemObject.options.length;
};
</script>

<style lang="scss">
.checkboxSelect {
  width: 100%;
  display: flex;
  align-items: top;
  padding: 16px 0;
  position: relative;
  .icon-down {
    position: absolute;
    right: 6px;
    top: 0px;
    transform: rotate(-90deg);
    cursor: pointer;
    z-index: 999;
  }
  .icon-up {
    position: absolute;
    right: 10px;
    top: 0px;
    transform: rotate(90deg);
    cursor: pointer;
    z-index: 999;
  }
  .checkbox-all {
    height: 32px;
    line-height: 28px;
  }
  .el-checkbox-group {
    width: 100%;
  }
  #checkboxBox {
    width: 100%;
  }
  .el-checkbox-button {
    min-width: 80px !important;
    margin: 0 6px;
    height: 28px;
    line-height: 28px;
    border-radius: 3px !important;
    margin-bottom: 6px !important;
    overflow: hidden;
    .el-checkbox-button__inner {
      width: 100%;
      white-space: nowrap;
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      border: 0 !important;
      border-radius: 3px !important;
    }
    &.is-checked {
      .el-checkbox-button__inner {
        background: #2263bf !important;
      }
    }
  }
}
</style>
